<template>
  <view class="page-wrap">
    <view class="top-section">
      <view class="top-profile">
        <image class="profile-pic" :src="user.profileImage" mode="aspectFill"></image>
        <view class="user-info">
          <text class="user-title">{{ user.company }}</text>
          <text class="user-subtitle">{{ user.name }} {{ user.phone }}</text>
        </view>
        <image class="right-icon" src="/static/images/user/right.png" mode="aspectFit"></image>
      </view>
      <view class="info-card">
        <view class="info-content">
          <view class="left-section">
            <view class="diamond-tag">
              <image class="diamond-icon" :src="info.diamondIcon" mode="aspectFit"></image>
              <text class="tag-text">{{ info.tag }}</text>
            </view>
            <text class="expiry-text">{{ info.expiry }}</text>
          </view>
          <button class="renew-button" @click="renew">立即续费</button>
        </view>
      </view>
    </view>

    <view class="menu-card">
      <view class="menu-items">
        <view class="menu-item" v-for="menu in menus" :key="menu.id" @click="navigate(menu)">
          <image class="menu-icon" :src="menu.icon" mode="aspectFit"></image>
          <text class="menu-text">{{ menu.name }}</text>
        </view>
      </view>
    </view>
    <view class="settings-list">
      <view class="settings-item" v-for="item in settingsList" :key="item.id" @click="navigate(item)">
        <view class="settings-text">
          <text class="settings-name">{{ item.name }}</text>
        </view>
        <view class="settings-right">
          <text v-if="item.description" class="settings-description">{{ item.description }}</text>
          <image class="settings-right-icon" src="/static/images/user/right.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <custom-tabbar />
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useClipboard, usePermission } from '@/hooks';
  import customTabbar from '@/components/custom-tabbar/custom-tabbar.vue';

  const user = ref({
    profileImage: '/static/images/user/profile.png',
    company: '武汉云友蔬菜批发配送',
    name: '肖士举',
    phone: '17720498851'
  });

  const info = ref({
    diamondIcon: '/static/images/user/diamond.png',
    tag: '专业档口版',
    expiry: '到期时间：2025年11月09日'
  });

  const menus = ref([
    { id: 1, icon: '/static/images/user/menu1.png', name: '人员管理', route: '/pages/personnel' },
    { id: 2, icon: '/static/images/user/menu1.png', name: '耗材商城', route: '/pages/supplies' },
    { id: 3, icon: '/static/images/user/menu3.png', name: '功能反馈', route: '/pages/feedback' },
    { id: 4, icon: '/static/images/user/menu4.png', name: '经营文案', route: '/pages/copywriting' }
  ]);

  const settingsList = ref([
    { id: 1, name: '连接打印机', description: '未连接', route: '/pages/connectPrinter' },
    { id: 2, name: '打印配置', description: '', route: '/pages/printConfig' },
    { id: 3, name: '功能配置', description: '', route: '/pages/functionConfig' },
    { id: 4, name: '商户认证', description: '', route: '/pages/merchantAuth' },
    { id: 5, name: '关于我们', description: '', route: '/pages/aboutUs' },
    { id: 6, name: '当前版本：1.0.0-0895', description: '检查更新', route: '/pages/version' },
  ]);

  const { setClipboardData, getClipboardData } = useClipboard();

  const toCopy = async () => {
    await setClipboardData({ data: '1234567890' });
    const data = await getClipboardData();
    console.log('[ data ] >', data);
  };

  onShow(async () => {
    const hasPermission = await usePermission();
    console.log(hasPermission ? '已登录' : '未登录，拦截跳转');
  });

  const renew = () => {
    console.log('立即续费按钮被点击');
  };

  const navigate = (menu) => {

  };
</script>

<style scoped>
  .page-wrap {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    min-height: 100vh;
    position: relative;
  }

  .top-section {
    width: 100%;
    height: 360rpx;
    background-image: url('static/images/user/top-background.png');
    background-size: cover;
    background-position: center;
    padding: 20rpx;
    position: relative;
  }

  .top-profile {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }

  .profile-pic {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  .user-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
  }

  .user-title {
    font-size: 23px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    font-weight: bold;
  }

  .user-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: rgba(64, 72, 41, 1);
    margin-top: 10rpx;
  }

  .right-icon {
    width: 40rpx;
    height: 40rpx;
    color: #000;
  }

  .info-card {
    width: 80%;
    padding: 50rpx 10rpx 70rpx 10rpx;
    margin-left: 40rpx;
    margin-top: 50rpx;
    background-image: url('static/images/user/info.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    background-color: transparent;

  }

  .info-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-section {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
  }

  .diamond-tag {
    display: flex;
    align-items: center;
  }

  .diamond-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }

  .tag-text {
    font-size: 24rpx;
    color: rgba(242, 169, 34, 1);
    border-radius: 23px;
    background: rgba(56, 56, 56, 0.61);
    padding: 5rpx 10rpx;
    border-radius: 10rpx;
  }

  .expiry-text {
    font-size: 22rpx;
    margin-top: 10rpx;
    color: rgba(255, 235, 214, 0.34);
  }

  .renew-button {
    width: 200rpx;
    height: 80rpx;
    border: none;
    border-radius: 75rpx;
    font-weight: 400;
    color: rgba(112, 83, 54, 1);
    background: linear-gradient(160.91deg, rgba(239, 204, 152, 1) 0%, rgba(222, 174, 104, 1) 100%);
    box-shadow:inset -2px -2px 2px  rgba(82, 54, 20, 0.25),inset 2px 2px 4px  rgba(255, 244, 191, 0.61);
  }

  .menu-card {
    box-sizing: border-box;
    width: 100%;
    margin: -70rpx 20rpx 0rpx -5rpx;
    padding: 90rpx 50rpx 30rpx 30rpx;
    background-image: url('static/images/user/menu-background.png');
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    background-color: transparent;
    z-index: 1;
    overflow: hidden;
  }

  .menu-items {
    width: 100%;

    display: flex;
    align-items: center;
  }

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-left: 30rpx;

  }

  .menu-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 10rpx;
  }

  .menu-text {
    font-size: 26rpx;
    color: #848484;
  }

  .settings-list {
    width: 100%;
    margin: 20rpx 0;
    background-color: #ffffff;
    border-radius: 15rpx;
    overflow: hidden;
  }

  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx;
    font-weight: bold;

  }

  .settings-item:last-child {
    border-bottom: none;
  }

  .settings-text {
    flex: 1;
  }

  .settings-name {
    font-size: 40rpx;
    color: #000;
    font-weight: 500;
  }

  .settings-right {
    display: flex;
    align-items: center;
  }

  .settings-description {
    font-size: 40rpx;
    color: #000;
    margin-right: 10rpx;
    font-weight: 500;
  }

  .settings-right-icon {
    width: 30rpx;
    height: 30rpx;
  }
</style>
